import React, { useState, useImperativeHandle, useRef } from 'react';
import { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import getApiData from '@/services/cpasRequest';
import { intl } from '@/utils';
import getIcon, { getCpasIcon } from '@/utils/icon';
import Popup from 'devextreme-react/popup';
import TreeView from 'devextreme-react/tree-view';

interface SizeProp {
  width?: Number | String,
  height?: Number | String,
}

const MoveToPhase: React.FC<any> = React.forwardRef((props, ref) => {
  const { width, height, ...restProps } = props;
  const [visible, setVisible] = useState<boolean>(false);
  const [treeData, setTreeData] = useState<any[]>([]);
  const [size, setSize] = useState<SizeProp>({ width: 380, height: 500 });
  const [curNodeData, setCurNodeData] = useState<any>(undefined);
  const diaParams = useRef<AudDialogShowParams>();

  useImperativeHandle(ref, () => ({
    show: async (params: AudDialogShowParams) => {
      diaParams.current = params;
      setVisible(true);
    },
    close: () => { setVisible(false) }
  }));

  return (
    <>
      <Popup
        ref={ref}
        visible={visible}
        {...restProps}
        minWidth={520}
        width={520}
        height={500}
        showTitle={true}
        title={intl('audit.paper.move', '移动到')}
        {...size}
        // dragOutsideBoundary={true}
        resizeEnabled={true}
        onResizeEnd={(e) => {
          setSize({ width, height });
        }}
        onHiding={() => { setVisible(false) }}
        onShown={() => {
          // 加载阶段树
          // if (treeData.length > 0) return;
          getApiData('sjjd.moveTo', diaParams.current?.args).then((v) => {
            if (v.ok) {
              setTreeData(v.data);
            } else {
              setTreeData([]);
            }
          });
        }}
        contentRender={() => (
          <TreeView
            height={'100%'}
            width={'100%'}
            selectionMode="single"
            selectByClick={true}
            items={treeData}
            dataStructure="plain"
            displayExpr="jdmc"
            parentIdExpr="pid"
            keyExpr="id"
            searchMode="contains"
            searchEnabled={true}
            onItemClick={(e) => {
              setCurNodeData(e.itemData);
            }}
            itemRender={(node: any) => {
              return <div>{getCpasIcon('..')} {node.jdmc} </div>;
            }}
          />
        )}
        toolbarItems={[
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.cancel', '取消'),
              onClick: () => setVisible(false),
            },
          },
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.ok', '确定'),
              type: 'default',
              disabled: (!curNodeData),
              onClick: () => {
                if (diaParams.current?.okCallback) {
                  diaParams.current.okCallback(curNodeData);
                }
              },
            },
          },
        ]}
      />
    </>
  );
});

export default MoveToPhase